<template>
    <!-- <div class="ad_item" :class="{in_use: op}" @click="handleClick"> -->
    <div class="ad_item" v-if="advert.id">
        <div class="ad_info" @click="handleClick">
            <div class="image">
                <image :src="advert.advertPic" mode="aspectFill" />
                <i v-if="advert.advertType == '03'" class="icon-xiaochengxu2"></i>
            </div>
            <div class="ad_des">
                <p>{{advert.advertTitle}}</p>
                <!-- 商品 -->
                <div v-if="advert.advertType == '00' || advert.advertType == '03'" class="price color-red">￥{{advert.showPrice || 0}}</div>
                <!-- 图片 -->
                <div v-if="advert.advertType == '02'" class="invite">{{advert.advertDecript}}</div>
                <span v-if="opType == 'insert'">点击插入广告</span>
                <span v-else>{{advert.btnName || ['去购买', '点击查看', '查看', '打开小程序'][+advert.advertType]  }}</span>
            </div>
            <i v-if="canChange" @click.stop="chooseChangeType('open')" ref="ad_choose_icon" class="icon-settings"></i>

            <div class="launch_mini_app" v-if="advert.advertDecript && advert.advertUrl && advert.advertType == '03' && opType != 'insert' && opType != 'edit' && !$listeners.click">
                    <!-- :username="advert.advertDecript"  -->
                <wx-open-launch-weapp 
                    class="wx-open-launch-weapp" 
                    :appid="advert.advertDecript"
                    @launch="launchSuccess"
                    :path="advert.advertUrl">
                    <script type="text/wxtag-template">
                        <div style="width:100%;height:100%;position: absolute;top:0;left:0;"></div>
                    </script>
                </wx-open-launch-weapp>
            </div>
        </div>
        <div class="op" v-if="opType == 'edit'">
            <p class="flex-v-center" @click.stop="$navigate.to('/pages/user/whoSeeMe')">
                被点击<span class="color-red">{{advert.clickAllCnt}}</span>次 
                <i class="icon-arrow-right fs24 fw-bold mar-l10 color-ccc"></i>
            </p>
            <div class="btns flex-v-center">
                <div class="btn" @click.stop="opItem('delete')">删除</div>
                <div class="btn" @click.stop="opItem('modify')">修改</div>
            </div>
        </div>
        <div v-if="change.visible" class="mask" @click="chooseChangeType('close')">
            <div class="choose_typ">
                <p @click="chooseChangeType('confirm', 'change')">更换</p>
                <p @click="chooseChangeType('confirm', 'delete')">移除</p>
            </div>
        </div>

        <uni-popup ref="imgAdList" type="center">
            <div class="w600 h800">
                <swiper class="w600 h800">
                    <swiper-item class="w600 h800" v-for="(i, idx) in advert.advertContent" :key="idx">
                        <image class="w600 h800" :src="i" mode="aspectFit" />
                    </swiper-item>
                </swiper>
            </div>
        </uni-popup>
    </div>
</template>

<script>
import { getAdvertById, clickAdvert } from '@/request/ad'
export default {
    data() {
        return {
            change: {
                visible: false
            },
            adDetail: {}
        }
    },
    props: {
        id: {
            type: String,
            default: ''
        },
        item: {
            type: Object,
            default: () => ({})
        },
        shareKey: {
            type: String,
            default: ''
        },
        opType: {
            type: String,
            default: '', //edit：可编辑， insert：插入广告
        },
        canChange: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        advert() {
            let advert = {}
            if(this.id) {
                advert = this.adDetail
            } else {
                advert = this.item
            }
            console.log(advert);
            if(advert.advertType == '02' && advert.advertContent && typeof advert.advertContent == 'string') {
                advert.advertContent = advert.advertContent.split(',')
            }
            return advert
        }
    },
    watch: {
        id(val) {
            this.getAdDetail(val)
        }
    },  
    mounted() {
        this.getAdDetail(this.id)
    },
    methods: {
        getAdDetail(id) {
            if(id) {
                getAdvertById({advertId: id}).then(res => {
                    this.adDetail = res.data
                })
            }
        },
        handleClick() {
            if(this.$listeners.click) {
                this.$emit('click', this.advert)
            } else {
                if(this.opType == 'edit' || this.opType == 'insert') return
                if(this.shareKey && this.$store.state.user.account.token) {
                    clickAdvert({
                        advertId: this.advert.id,
                        shareKey: this.shareKey
                    })
                }
                if(this.advert.advertType == '01') {
                    if(this.advert.advertUrl.indexOf('http') != 0) return this.$interact.toast('请跳转正确的链接')
                    location.href = this.advert.advertUrl
                } else if(this.advert.advertType == '00') {
                    if(this.advert.advertUrl.indexOf('http') == 0) {
                        location.href = this.advert.advertUrl
                    } else {
                        uni.setClipboardData({
                            data: this.advert.advertUrl,
                            success: () => {
                                this.$interact.toast('已复制')      
                            }
                        })
                    }
                } else if(this.advert.advertType == '02') {
                    this.$refs.imgAdList.open()
                }

            }
        },
        launchSuccess() {
            if(this.shareKey && this.$store.state.user.account.token) {
                clickAdvert({
                    advertId: this.advert.id,
                    shareKey: this.shareKey
                })
            }
        },
        chooseChangeType(type, item) {
            if(type == 'open') {
                this.change.visible = true
            } else if(type == 'close') {
                this.change.visible = false
            } else if(type == 'confirm') {
                this.$emit('change', item)
                this.change.visible = false
            }
        },
        opItem(type) {
            this.$emit('opItem', type)
        }
    },

}
</script>

<style lang="less" scoped>
    .ad_item{
        width: 100%;
        background: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        position: relative;
        overflow: hidden;
        
        &.in_use{
            &::after{
                content: "使用中";
                position: absolute;
                top: 15rpx;
                left: -35rpx;
                height: 40rpx;
                line-height: 40rpx;
                width: 150rpx;
                .align(center);
                transform: rotate(-45deg);
                font-size: 24rpx;
                background: @mainColor;
                color: #fff;
            }
        }
        .ad_info{
            padding: 30rpx;
            display: flex;
            border: 1px solid #ddd;
            border-radius: 20rpx;
            position: relative;
            .image{
                position: relative;
                margin-right: 20rpx;
                image{
                    background: #eee;
                    width: 180rpx;
                    height: 180rpx;
                    border-radius: 20rpx;
                }
                i{
                    width: 50rpx;
                    height: 50rpx;
                    font-size: 50rpx;
                    border-radius: 50%;
                    color: #eee;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    z-index: 10;
                    background: #5f53a2;
                }
            }
            .ad_des{
                flex: 1;
                height: 180rpx;
                width: 1px;
                position: relative;
                p{
                    width: 100%;
                    font-size: 32rpx;
                    height: 130rpx;
                }
                span{
                    padding: 0 20rpx;
                    height: 50rpx;
                    line-height: 48rpx;
                    border-radius: 25rpx;
                    color: @mainColor;
                    background: #fff;
                    border: 1px solid @mainColor;
                    font-size: 28rpx;
                    text-align: center;
                    position: absolute;
                    bottom: 6rpx;
                    right: 0;

                }
            }

            .launch_mini_app{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 10;
                .wx-open-launch-weapp{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
            }
            .icon-settings{
                width: 60rpx;
                height: 60rpx;
                font-size: 26rpx;
                color: #aaa;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 50;
                .align(center);
            }
            
        }
        .op{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 30rpx;
            .btns{
                .btn{
                    width: 140rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 30rpx;
                    border: 1px solid #ddd;
                    font-size: 28rpx;
                    text-align: center;
                    margin-left: 20rpx;
                }
            }   
        }

        .mask{
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.3);
            top: 0;
            left: 0;
            border-radius: 20rpx;
            z-index: 10;
            .choose_typ{
                width: 140rpx;
                height: 140rpx;
                background: #fff;
                border-radius: 10rpx;
                padding: 0 15rpx;
                position: absolute;
                right: 10rpx;
                top: 60rpx;
                &::before{
                    content: "";
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: -10rpx;
                    right: 12rpx;
                    border-bottom: 10rpx solid #fff;
                    border-left: 10rpx solid transparent;
                    border-right: 10rpx solid transparent;
                }
                p{
                    height: 70rpx;
                    line-height: 70rpx;
                    border-bottom: 1px solid #eee;
                    text-align: center;
                    &:last-child{
                        border-bottom: 0;
                    }
                }                
            }
        }
    }
</style>